<template>
  <div class="PaFollow">
    <h2>患者跟进</h2>
    <div class="operatingBox">
      <div class="operating">

        <el-button type="success" icon="el-icon-plus" size="small" @click="addFollow">新增</el-button>

      </div>
      <div class="operating">
        <el-input placeholder="请输入患者名称" v-model="input1" class="input-with-select">

          <el-button slot="append" icon="el-icon-search" @click="searchFollow"></el-button>
        </el-input>
      </div>
    </div>

    <div class="tab-content">
      <el-table :data="tableData" v-loading="loading"  tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="type" label="类型" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 0">电话</div>
            <div v-if="scope.row.type == 1">邮件</div>
            <div v-if="scope.row.type == 2">信息</div>
            <div v-if="scope.row.type == 3">拜访</div>
          </template>

        </el-table-column>
        <el-table-column prop="title" label="标题" width="300" style="white-space:nowrap" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="name" label="患者" width="80">
        </el-table-column>
        <el-table-column prop="chargePerson" label="负责人" width="80">
        </el-table-column>
        <el-table-column prop="date" label="跟进时间" width="120">
        </el-table-column>
        <el-table-column prop="nextDate" label="下次跟进" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120">
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag disable-transitions type="success" v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag disable-transitions type="info" v-if="scope.row.status == 3">已取消</el-tag>
            <el-tag disable-transitions type="primary" v-if="scope.row.status == 2">已完成</el-tag>
            <el-tag disable-transitions type="warning" v-if="scope.row.status == 0">新跟进</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="300">
          <template slot-scope="scope">
            
              <el-button type="primary" icon="el-icon-edit-outline" size="mini"
               @click="editFollow(scope.$index, scope.row)" :disabled="scope.row.status==2">修改</el-button>
            <el-button type="danger" icon="el-icon-close" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">

        <!-- 分页器 -->
        <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"></Pagination>
      </div>
    </div>



  </div>
</template>
<script>
import { mapMutations } from 'vuex';
import Pagination from '@/components/Pagination'



export default {
  name: 'paFollow',
  components: {
    Pagination
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      //加载
      loading:true,
      //搜索框的内容
      input1: "",

      //表格数据
      tableData: [{
        id: 1,
        patientId: 1,
        type: "电话",
        title: "大大小小小小小小小小小小小",
        name: "笔笔",
        chargePerson: "盖茨",
        date: "2022-2-1",
        nextDate: "2022-2-14",
        createTime: "2022-1-29",
        status: "新跟进",
        description: "",
        isDelete: 0,
        userId: sessionStorage.getItem("userID"),
        updateTime: ""
      }],

      userId:sessionStorage.getItem("userID"),


      //表格的内容量共有几条
      total: 0,
      currentPage: 1,
      pageSize: 10,
      
      //--------页码判断-------普搜  所有列表
      a:""  ,

    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.getAllFollowList(this.currentPage, this.pageSize)

  },

  mounted() {

  },
  methods: {
    //导入editPatient模块
    ...mapMutations("editPatient", ['changeTitle', 'changeRowData']),

    //获取列表
    async getAllFollowList(currentPage, pageSize) {
      let res = await this.$api.patients.getFollowList({ currentPage, pageSize });
      if (res.data.code === 200) {
        //渲染表格内容
        this.tableData = res.data.data.list
       
        console.log(this.tableData);
        //总数
        this.total = res.data.data.total;

        //加载
        this.loading=false
    
        //判断页面数据内容
        this.a="所有"
      } else {
        console.log('请求失败');
        this.loading=true;
        setTimeout(()=>{
          this.loading=false;
        },1000)
        this.a="";
        this.tableData = [];
        this.pageSize = 0;
        this.total = 1;
      }
    },

    //获取页码
    getPagination(page) {
      this.currentPage = page;
      if(this.a=="所有"){
        this.getAllFollowList(this.currentPage, this.pageSize)
      }else{
        this.searchFollow(this.input1,this.currentPage, this.pageSize)
      }
      
    },

    //新增
    addFollow() {
      this.$router.push("/patient/addFollow")
    },

    //普搜
    async searchFollow(name,currentPage,pageSize) {
      name=this.input1;
      currentPage=this.currentPage;
      pageSize=this.pageSize
      let res = await this.$api.patients.searchFollowPa(name,currentPage,pageSize);
      console.log(res);
      if (res.data.code === 200) {
        console.log(res.data.data.list);
        this.tableData = res.data.data.list
        //总数
        this.total = res.data.data.total;
        this.a="普搜"
      } else {
        // console.log('请求失败');
        this.a="",
        this.tableData = [];
        this.pageSize = 0;
        this.total = 1;
      }
     
    },
    
    //修改
    editFollow(index, row) {
      // console.log(row.id);
      this.changeRowData(row)
      this.$router.push("/patient/editFollow")
    },

    // 单个删除
    del(index, row) {
      console.log(index, row);
      console.log(row.id);
      // console.log(this.tableData);

      this.$confirm('删除该记录不能恢复, 确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //执行删除步骤,后台查询数据库，发起请求
        this.$api.patients.deleteFollow(row.id)
          .then(() => {
            this.getAllFollowList(this.currentPage,this.pageSize)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })  .catch(() => {
            this.$message.error('删除失败');
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      });
    }
  }
};
</script>
<style lang='less' scoped>
h2 {
  margin: 15px;
}

.el-table .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input {
  width: 200px;
}

.tab-content {
  margin: 10px;
}

// .isDisabled{
  
// }
</style>